<template>
    <div class="main">
        <!-- <div class="hotDisc">
            <header>新碟上架</header>
            <main>
                <div v-for="item of hotDisc">
                    <section class="img">
                    <img :src="item.picUrl">
                    </section> 
                    <span>{{item.name}}</span>
                    <span>{{item.artist.name}}</span>
                </div>
            </main>
            <Loading v-show="!hotDisc"></Loading>
        </div> -->
        <div class="allDisc">
            <header>
                <span>全部新碟</span>
                <!-- <ul>
                    <li>全部</li>
                    <li>|</li>
                    <li>华语</li>
                    <li>|</li>
                    <li>欧美</li>
                    <li>|</li>
                    <li>韩国</li>
                    <li>|</li>
                    <li>日本</li>
                </ul> -->
            </header>
            <Loading v-show="!currentDisc"></Loading>                
            <main>
                <div v-for="item of currentDisc">
                    <section class="img">
                    <img :src="item.picUrl">
                    </section> 
                    <span>{{item.name}}</span>
                    <span>{{item.artist.name}}</span>
                </div>
            </main>
            <Paging :len="len" :count="30" @getIndex="getData"></Paging>
        </div>
    </div>
    <UserFooter></UserFooter>
</template>

<script setup>
    import Paging from '../../globalCompoents/paging.vue'
    import { getCurrentInstance, onMounted, ref } from 'vue';
    const axios = getCurrentInstance().proxy.$http;

    const hotDisc = ref();
    const currentDisc = ref();
    const len = ref();
    onMounted(async () => {
        // hot new disc
        const { data } = await axios.get('/top/album')
        if(data.code !== 200) return alert('获取新碟失败');
        hotDisc.value = data.monthData.slice(0, 10);

        const { data: res } = await axios.get('/album/new?limit=9999');
        len.value = res.albums.length;
        console.log(len.value);
    })


    const getData = async (index) => {
        currentDisc.value = '';
        let { data } = await axios.get('/album/new', { params: { offset: index, limit: 30 } })
        currentDisc.value = data.albums;
    }

</script>

<style lang="less" scoped>
    // .hotDisc{
    //     header{
    //         border-bottom: 2.5px solid #c20c0c;
    //         font-size: 20px;
    //         line-height: 40px;
    //         margin-bottom: 20px;
    //     }
    //     main{
    //         display: grid;
    //         grid-template-columns: repeat(5, 1fr);
    //         gap: 40px;
    //         div{
    //             height: 185px;
    //             display: grid;
    //             grid-template-rows: 145px 25px 25px;
    //             .img{
    //                 background: url(../../../assets/img/coverall.png) no-repeat;
    //                 background-position: 0px -845px;
    //                 margin-bottom: 15px;
    //                 img{
    //                     width: 88%;
    //                     height: 100%;
    //                     border: 1px solid black;
    //                 }
    //             }
    //             span{
    //                 line-height: 25px;
    //                 overflow: hidden;
    //                 text-overflow: ellipsis;
    //                 white-space: nowrap;
    //                 &:first-child{
    //                     font-size: 13px;
    //                 }
    //                 &:last-child{
    //                     font-size: 10px;
    //                 }
    //             }
    //         }
    //     }
    // }

    .allDisc{
        // margin-top: 50px;
        header{
            border-bottom: 2.5px solid #c20c0c;
            display: flex;
            align-items: center;
            height: 35px;
            margin-bottom: 20px;
            span{
                font-size: 20px;
                margin-right: 20px;
            }
            ul{
                margin-top: 5px;
                display: flex;
                li{
                    font-size: 12px;
                    color: #555;
                    padding: 5px;
                    user-select: none;
                    &:nth-child(2n+1) {
                        cursor: pointer;
                    }
                }
            }
        }
        main{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 40px;
            div{
                height: 185px;
                display: grid;
                grid-template-rows: 145px 25px 25px;
                .img{
                    background: url(../../../assets/img/coverall.png) no-repeat;
                    background-position: 0px -845px;
                    margin-bottom: 15px;
                    img{
                        width: 88%;
                        height: 100%;
                        border: 1px solid black;
                    }
                }
                span{
                    line-height: 25px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:first-child{
                        font-size: 13px;
                    }
                    &:last-child{
                        font-size: 10px;
                    }
                }
            }
        }
    }

</style>